import { useState } from 'react'
import { motion } from 'framer-motion'
import AnimatedSection from '../components/shared/AnimatedSection'
import Button from '../components/shared/Button'
import { FiMail, FiMapPin, FiPhone } from 'react-icons/fi'

function Contact() {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormState(prev => ({ ...prev, [name]: value }))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    
    // Simulate form submission
    setTimeout(() => {
      setIsSubmitting(false)
      setIsSubmitted(true)
      setFormState({
        name: '',
        email: '',
        subject: '',
        message: ''
      })
      
      // Reset success message after 5 seconds
      setTimeout(() => {
        setIsSubmitted(false)
      }, 5000)
    }, 1500)
  }

  return (
    <div className="pb-12">
      {/* Hero Section */}
      <section className="pt-32 md:pt-40 pb-16">
        <div className="container-custom">
          <AnimatedSection>
            <h1 className="text-4xl md:text-5xl font-medium text-secondary-900 dark:text-white mb-6 text-center">
              Get in Touch
            </h1>
            <p className="text-lg md:text-xl text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto text-center">
              Have questions or want to learn more? We'd love to hear from you.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Contact Info & Form Section */}
      <section className="py-12">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Contact Info */}
            <AnimatedSection direction="right" className="lg:col-span-1">
              <div className="bg-secondary-50 dark:bg-secondary-800 rounded-apple p-8">
                <h2 className="text-2xl font-medium text-secondary-900 dark:text-white mb-6">
                  Contact Information
                </h2>
                <div className="space-y-6">
                  <div className="flex items-start">
                    <div className="mt-1 mr-4 p-2 bg-primary-100 dark:bg-primary-900/30 rounded-full text-primary-500">
                      <FiMail size={20} />
                    </div>
                    <div>
                      <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Email</h3>
                      <p className="text-secondary-600 dark:text-secondary-400">hello@appledesign.com</p>
                      <p className="text-secondary-600 dark:text-secondary-400">support@appledesign.com</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="mt-1 mr-4 p-2 bg-primary-100 dark:bg-primary-900/30 rounded-full text-primary-500">
                      <FiPhone size={20} />
                    </div>
                    <div>
                      <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Phone</h3>
                      <p className="text-secondary-600 dark:text-secondary-400">+1 (800) 123-4567</p>
                      <p className="text-secondary-600 dark:text-secondary-400">Mon-Fri 9am-6pm EST</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="mt-1 mr-4 p-2 bg-primary-100 dark:bg-primary-900/30 rounded-full text-primary-500">
                      <FiMapPin size={20} />
                    </div>
                    <div>
                      <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Location</h3>
                      <p className="text-secondary-600 dark:text-secondary-400">
                        123 Design Street<br />
                        San Francisco, CA 94103<br />
                        United States
                      </p>
                    </div>
                  </div>
                </div>
                
                <div className="mt-8 pt-8 border-t border-secondary-200 dark:border-secondary-700">
                  <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
                    Business Hours
                  </h3>
                  <ul className="space-y-2 text-secondary-600 dark:text-secondary-400">
                    <li className="flex justify-between">
                      <span>Monday - Friday:</span>
                      <span>9:00 AM - 6:00 PM</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Saturday:</span>
                      <span>10:00 AM - 4:00 PM</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Sunday:</span>
                      <span>Closed</span>
                    </li>
                  </ul>
                </div>
              </div>
            </AnimatedSection>
            
            {/* Contact Form */}
            <AnimatedSection direction="left" className="lg:col-span-2">
              <div className="bg-white dark:bg-secondary-800 rounded-apple p-8 shadow-apple dark:shadow-apple-dark">
                <h2 className="text-2xl font-medium text-secondary-900 dark:text-white mb-6">
                  Send us a Message
                </h2>
                
                {isSubmitted && (
                  <motion.div 
                    className="mb-6 p-4 bg-success-100 dark:bg-success-900/20 text-success-700 dark:text-success-400 rounded-apple"
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.3 }}
                  >
                    Thank you for your message! We'll get back to you soon.
                  </motion.div>
                )}
                
                <form onSubmit={handleSubmit}>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                      <label htmlFor="name" className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
                        Name
                      </label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        value={formState.name}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-3 border border-secondary-200 dark:border-secondary-700 rounded-apple bg-white dark:bg-secondary-900 text-secondary-900 dark:text-white focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900/30 transition-colors"
                        placeholder="Your name"
                      />
                    </div>
                    <div>
                      <label htmlFor="email" className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
                        Email
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        value={formState.email}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-3 border border-secondary-200 dark:border-secondary-700 rounded-apple bg-white dark:bg-secondary-900 text-secondary-900 dark:text-white focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900/30 transition-colors"
                        placeholder="your.email@example.com"
                      />
                    </div>
                  </div>
                  
                  <div className="mb-6">
                    <label htmlFor="subject" className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
                      Subject
                    </label>
                    <select
                      id="subject"
                      name="subject"
                      value={formState.subject}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-3 border border-secondary-200 dark:border-secondary-700 rounded-apple bg-white dark:bg-secondary-900 text-secondary-900 dark:text-white focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900/30 transition-colors"
                    >
                      <option value="">Select a subject</option>
                      <option value="General Inquiry">General Inquiry</option>
                      <option value="Product Support">Product Support</option>
                      <option value="Billing Question">Billing Question</option>
                      <option value="Partnership Opportunity">Partnership Opportunity</option>
                      <option value="Other">Other</option>
                    </select>
                  </div>
                  
                  <div className="mb-6">
                    <label htmlFor="message" className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
                      Message
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formState.message}
                      onChange={handleChange}
                      required
                      rows={6}
                      className="w-full px-4 py-3 border border-secondary-200 dark:border-secondary-700 rounded-apple bg-white dark:bg-secondary-900 text-secondary-900 dark:text-white focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900/30 transition-colors resize-none"
                      placeholder="How can we help you?"
                    ></textarea>
                  </div>
                  
                  <div className="flex justify-end">
                    <Button
                      type="submit"
                      size="lg"
                      disabled={isSubmitting}
                      className={isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}
                    >
                      {isSubmitting ? 'Sending...' : 'Send Message'}
                    </Button>
                  </div>
                </form>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Map Section */}
      <section className="py-16">
        <div className="container-custom">
          <AnimatedSection>
            <div className="rounded-apple overflow-hidden shadow-apple dark:shadow-apple-dark">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100939.98555098464!2d-122.50764017955156!3d37.75781499657919!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2s!4v1713444553409!5m2!1sen!2s"
                width="100%"
                height="450"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Our location"
              ></iframe>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-16 bg-secondary-50 dark:bg-secondary-900/50">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-4">
                Frequently Asked Questions
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto">
                Find quick answers to common questions
              </p>
            </div>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {[
              {
                question: "What are your support hours?",
                answer: "Our support team is available Monday through Friday from 9 AM to 6 PM EST. For urgent issues, we also offer limited weekend support."
              },
              {
                question: "How quickly can I expect a response?",
                answer: "We aim to respond to all inquiries within 24 hours during business days. For complex technical issues, resolution may take up to 48 hours."
              },
              {
                question: "Do you offer phone support?",
                answer: "Yes, phone support is available for all customers during our business hours. Please use the contact form to request a call back if needed."
              },
              {
                question: "How can I report a bug?",
                answer: "Bugs can be reported through our dedicated support portal or by emailing support@appledesign.com with details about the issue and steps to reproduce it."
              },
              {
                question: "Do you offer on-site training?",
                answer: "Yes, we offer on-site training services for enterprise customers. Please contact our sales team for pricing and availability."
              },
              {
                question: "What's your refund policy?",
                answer: "We offer a 30-day money-back guarantee for all our products. If you're not satisfied, you can request a full refund within 30 days of purchase."
              }
            ].map((faq, index) => (
              <AnimatedSection key={index} delay={0.1 * index}>
                <div className="bg-white dark:bg-secondary-800 rounded-apple p-6 shadow-apple dark:shadow-apple-dark">
                  <h3 className="text-xl font-medium text-secondary-900 dark:text-white mb-3">
                    {faq.question}
                  </h3>
                  <p className="text-secondary-600 dark:text-secondary-400">
                    {faq.answer}
                  </p>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter Section */}
      <section className="py-16">
        <div className="container-custom">
          <AnimatedSection>
            <div className="bg-primary-500 rounded-apple p-10 md:p-16 text-center relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-tr from-primary-600 to-primary-400 z-0"></div>
              <div className="relative z-10">
                <h2 className="text-3xl md:text-4xl font-medium text-white mb-6">
                  Stay Updated
                </h2>
                <p className="text-white/90 text-lg max-w-2xl mx-auto mb-8">
                  Subscribe to our newsletter to receive product updates, design tips, and exclusive offers.
                </p>
                <form className="max-w-md mx-auto">
                  <div className="flex flex-col sm:flex-row gap-4">
                    <input
                      type="email"
                      placeholder="Enter your email"
                      className="flex-grow px-4 py-3 rounded-apple text-secondary-800 focus:outline-none focus:ring-2 focus:ring-white/30"
                    />
                    <Button className="bg-white text-primary-500 hover:bg-white/90 whitespace-nowrap">
                      Subscribe
                    </Button>
                  </div>
                </form>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  )
}

export default Contact